<template>
  <!-- 顶部栏 -->
  <van-nav-bar title="购物车" left-text="返回" :right-text="navbarRightText" left-arrow @click-left="backFn()"
    @click-right="changeRightText()" placeholder fixed />
  <!-- 内容 -->
  <div v-for="item in cartArr" :key="item.proid">
    <!-- 滑块 -->
    <van-swipe-cell class="cart-item">
      <!-- 复选框 -->
      <van-checkbox v-model="item.flag" @change="check(item.cartid, item.flag)" class="checkbox" />

      <!-- 商品卡 -->
      <van-card :num="item.num" :price="Math.round(item.originprice * item.discount) / 10" :title="item.proname"
        :origin-price="item.originprice" class="goods-card" :thumb="item.img1" style="margin-top: 0;">
        <template #footer>
          <van-button size="small" type="warning" @click="reduceNum(item.cartid, item.num)">-</van-button>
          <van-button size="small" type="primary" @click="addNum(item.cartid, item.num)">+</van-button>
        </template>
      </van-card>
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="delFn(item.cartid)" />
      </template>
    </van-swipe-cell>
  </div>
  <!-- 动作栏 -->

  <!-- 默认 状态 :price="3050"待计算-->
  <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit()" v-if="!isManagement" placeholder>

    <van-button type="primary" @click="checkAll">{{ checkAllText }}</van-button>

    <!-- 待选 -->
    <!-- <template #tip>
      你的收货地址不支持配送,
      <span @click="onClickLink">修改地址</span>
    </template> -->
  </van-submit-bar>

  <!-- 管理 状态 -->
  <van-submit-bar button-text="删除" @submit="delChecked()" v-if="isManagement" placeholder>

    <van-button type="primary" @click="checkAll">{{ checkAllText }}</van-button>
    <van-button type="danger" @click="delAll()">清空购物车</van-button>

  </van-submit-bar>
</template>

<script setup>
import { changeNumReq, checkAllReq, checkReq, delAllReq, delReq } from '@/api/cart'
import { loadCartList, cartArr } from '@/stores/cart'
import { getlocalStorage } from '@/utils/localStorage'
import { showConfirmDialog, showDialog } from 'vant'
import { computed, ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
let userid = getlocalStorage.userid

// 获取购物车列表
loadCartList()
// 返回按钮的处理函数
let router = useRouter()
function backFn() {
  checkAllReq(userid, false)
  router.back()
}
//页面管理状态
let navbarRightText = ref('管理')
let isManagement = ref(false)
function changeRightText() {
  isManagement.value = !isManagement.value
  if (isManagement.value) {
    navbarRightText.value = '取消管理'
  } else {
    navbarRightText.value = '管理'
  }
  return navbarRightText.value
}


/**
 * 修改数量模块
 * @param cartid
 * @param num
 */
// 修改购物车中商品数量
function changeNum(cartid, num) {
  changeNumReq(cartid, num)
    .then((res) => {
      if (res.data.code == 200) {
        loadCartList()
      } else {
        showDialog({
          title: '提示',
          message: res.data.message,
        }).then(() => {
        })
      }
    })
}

// 增加商品数量
function addNum(cartid, num) {
  num += 1
  changeNum(cartid, num)
}

// 减少商品数量
function reduceNum(cartid, num) {
  if (num > 1) {
    num -= 1
    changeNum(cartid, num)
  } else {
    showConfirmDialog({
      title: '提示',
      message: '你要删除该物品吗？',
    })
      .then(() => {
        delFn(cartid)
      })
      .catch(() => { })
  }
}



// 提交订单按钮的处理函数
function onSubmit() {
  console.log('点击了提交按钮')
}


/**
 * 选择框模块
 */
//全选
let checkAllText = ref('全选')
let checkAllFlag = false
function checkAll() {
  checkAllFlag = !checkAllFlag
  checkAllReq(userid, checkAllFlag)
    .then(res => {
      if (res.data.code == 200) {
        if (checkAllFlag) {
          checkAllText.value = '取消全选'
        } else {
          checkAllText.value = '全选'
        }
        loadCartList()
      }
    })
}
//单选
function check(cartid, flag) {
  checkReq(cartid, flag)
    .then(res => {
      if (res.data.code == 200) {
        loadCartList()
      }
    })
}

//判断是否全选
watchEffect(
  function () {
    if (cartArr.value.length > 0) {
      if (cartArr.value.every(v => v.flag)) {
        checkAllText.value = '取消全选'
      } else {
        checkAllText.value = '全选'
      }
    } else {
      checkAllText.value = '全选'
    }
  }
)

//计算 选中总价
let totalPrice = computed(
  function () {
    let list = cartArr.value.filter(v => v.flag)
    let r = list.reduce((sum, v) => {
      return sum + v.num * Math.round(v.originprice * v.discount) * 10
    }, 0)
    return r
  })

/**
 * 删除模块
 * @param cartid
 */
// 删除购物车中的商品

function delFn(cartid) {
  delReq(cartid)
    .then((res) => {
      if (res.data.code == 200) {
        loadCartList()
      } else {
        showDialog({
          title: '提示',
          message: res.data.message,
        }).then(() => {
        })
      }
    })
}
//删除选中
function delChecked() {
  let list = cartArr.value.filter(v => v.flag)
  let p = []
  list.forEach(v => {
    p.push(delFn(v.cartid))
  });
  Promise.all(p).then(() => {
    loadCartList()
  })
}

//清空购物车
function delAll() {
  delAllReq(userid)
    .then(res => {
      if (res.data.code == 200) {
        loadCartList()
      }
      console.log(res.data);
    })
}

</script>

<style scoped>
.checkbox {
  padding-left: 13px;
  margin-top: 5px;
  background-color: #F7F8FA;
}

.submit-bar-checkbox {
  float: left;
  left: 0;
}

.delete-button {
  height: 100%;
}
</style>
